<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="./jquery-3.6.0.js"></script>
</head>
<body>
    <button id="btn1">SayHello</button>
    <button>textbtn</button>
</body>
<script>
    // jquary的使用
    // $ 实际上是一个函数
    /*
    $是jquary中的核心函数
    1.$ 后面接function是代表window.onload  在页面加载之后执行这个函数
    2.$ 后面是HTML标签时，会创建标签对象
    3.$ 之后的参数为选择字符串时，根据选择字符串查询对象 例如：#(id) .(class) 标签名
    4.$ 之后传入为dom对象时，会将dom对象转化为jquary对象
    */
    $(function(){    //相当于window.onload  页面加载之后
        var $btn1=$("#btn1");   
        $btn1.click(function(){
            console.log("This is quary event");
        })
    })
    $("<div><span>abc</span></div>").appendTo("body");
    console.log($("button").length);

    var btn1=document.getElementById("btn1");
    console.log(btn1);
    //dom对象转化为jquary对象
    console.log($(btn1));
    //jquary对象的本质是dom对象的数组
    var $buttons=$("button");
    var btn1=$buttons[0];
    console.log(btn1);

    console.log($.trim(" asd  asd  qwe "));
</script>
</html>